<h1 *ngIf="!user1Name">Welcome!</h1>
<h1 *ngIf="user1Name">Welcome, {{ user1Name }} {{ familyName }}!</h1>

<div class="panel panel-default">
  <div class="panel-body">
    <p>Login with Username/Password</p>

    <p style="color:red; font-weight:bold" *ngIf="loginFailed">
      Login wasn't successfull.
    </p>

    <div class="form-group">
      <label>Username</label>
      <input class="form-control" [(ngModel)]="userName" />
    </div>
    <div class="form-group">
      <label>Password</label>
      <input class="form-control" type="password" [(ngModel)]="password" />
    </div>
    <div class="form-group">
      <button class="btn btn-default" (click)="loginWithPassword()">
        Login
      </button>
      <button class="btn btn-default" (click)="logout()">Logout</button>
    </div>
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-body"><b>Username/Password:</b> max/geheim</div>
</div>

<div class="panel panel-default">
  <div class="panel-body">
    <p><b>access_token_expiration:</b> {{ access_token_expiration }}</p>
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-body">
    <p><b>access_token:</b> {{ access_token }}</p>
    <div *ngIf="userProfile">
      <b>user profile:</b>
      <pre>{{ userProfile | json }}</pre>
    </div>
  </div>
</div>


<!--<div>-->
<!--  <h2>Login</h2>-->
<!--  <form (ngSubmit)="onSubmit()" action="/login" method="POSt">-->
<!--    <div>-->
<!--      <label for="username">Username:</label>-->
<!--      <input type="text" id="username" [(ngModel)]="username" name="username" placeholder="Username" required autofocus>-->
<!--    </div>-->
<!--    <div>-->
<!--      <label for="password">Password:</label>-->
<!--      <input type="password" id="password" [(ngModel)]="password" name="password" placeholder="Password" required>-->
<!--      <input name="_csrf" type="hidden" value="" />-->
<!--    </div>-->
<!--    <button type="submit" [disabled]="!canLogin()">Login</button>-->
<!--  </form>-->
<!--</div>-->
